<template>
  <div class="container">
    <h1>{{ article.title }}</h1>
    <el-input
      v-model="article.content" 
      type="textarea" :rows="6" 
      :autosize="{ minRows: 6, maxRows: 10 }" 
      class="content-input">
    </el-input>
    <el-button type="primary" @click="saveArticle">保存</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        id:'',
        title: '',
        content: ''
      }
    };
  },
  methods: {
    saveArticle() {
      // 在这里编写保存文章的逻辑
      // 可以通过 this.article.title 和 this.article.content 获取编辑后的文章标题和内容
      // 调用后端接口保存文章内容的具体逻辑
      this.$axios.post('http://localhost:8181/articleForm/saveArticle',this.article)
      .then(resp => {
        // 处理响应结果
        console.log(resp.data);
        this.$message({
          message: '新增/修改，成功',
          type: 'success'
        });
         // 跳转到其他页面
        this.$router.push('/Show');
      }).catch(error => {
          // 处理错误
           console.error(error);
      });
    }
  },
  mounted() {
    // 在这里获取文章数据，并将文章数据赋值给 this.article
    this.article.id = this.$route.query.id || '';
    this.article.title = this.$route.query.title || '';
    this.article.content = this.$route.query.content || '';
  }
};
</script>

<style>

.container {
  max-width: 1200px;
  
  margin: 20px auto;
  padding: 30px;
}
.content-input {
  padding: 20px;
  font-size: 20px;
}

</style>